<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas绘制表格</title>
    <style>
        .container {
            width: 600px;
            margin: 100px auto;
        }
    </style>
</head>
<body>
<div class="container">
    <canvas id="canvas" width="600" height="600"></canvas>
</div>
</body>
</html>

<script>
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    var lineH = 10;
    var width = canvas.width;
    for (var i = 0; i < width / lineH; i++) {
        // 开始画横线
        context.moveTo(0, lineH * i);
        context.lineTo(width, lineH * i);

        // 开始画竖线
        context.moveTo(lineH * i, 0);
        context.lineTo(lineH * i, width);

    }
    context.lineWidth = .8;
    context.stroke();


</script>